<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript" src="/static/js/vue.js"></script>
<script type="text/javascript" src="/static/js/jquery-3.3.1.js"></script>
<div id="app">
index
<!--<button v-on:click="show">显示用户信息</button><br>-->
   <h1>显示商品信息</h1>
    <table>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>price</th>
            <th>num</th>
            <th>pubdate</th>
            <th></th>
        </tr>
        <tr v-for="goods in goodslist"><!--v-model="user.name"-->
            <th>{{goods.gid}}</th>
            <th>{{goods.gname}}</th>
            <th>{{goods.price}}</th>
            <th>{{goods.num}}</th>
            <th>{{goods.pubdate}}</th>
            <th><button v-on:click="del(goods.gid)">del</button>|<button  v-on:click="update(goods.gid)">update</button></th>
        </tr>
    </table>
</div>
<script type="text/javascript">
    var v=new Vue({
        el:'#app',//挂载
        data:{
            user:{

            },
            goodslist:[
                {
                    gid:1,
                    gname:'',
                    price:100,
                    pic:'',
                    price:0,
                    pubdate:''
                }
            ]
        },
        methods:{
            update:function(gid){
                //根据gid跳转，在下个页面去服务器查询，并返回ResultMsg对象(一条商品goods)
                localStorage.setItem("gid",gid); //浏览器存储数据
                location.href="/url/update";//跳转页面
            },
            del:function(gid){
                alert(gid);
                //发起删除请求
                $.ajax({
                    url:'/goods/del/'+gid,  //data:{gid:gid}--->localhost:8080/goods/del?gid=3
                    type:'get',
                    dataType:'json',
                    success:function(res){
                        if(res.code==200){
                            //重新查询？？？？ selectAll();
                           v.selectAll();
                        }
                    }
                });


            },
            selectAll:function(){
                $.ajax({
                    url:'/goods/all',
                    type:'get',
                    dataType:'json',
                    success:function(res){
                        console.log(res);
                        //取出code值--400-》跳转登录页面
                        //取出data的值--循环遍历
                        if(res.code==400){
                            location.href="/url/login";
                        }else{
                            //取出数据
                            v.goodslist=res.data;
                        }

                    }
                })
            },
            show:function(){
                //发起请求
                $.ajax({
                    url:'/user/show',  //   /url/login   user/login-->/url/user/login 404
                    type:'get',
                    dataType:'json',
                    success:function(res){
                        v.user=res;
                    }
                })
            }
        },
        mounted:function(){
            //加载所有商品信息---向服务器发起请求 /goods/all--ResultMsg(code/data商品信息)
            this.selectAll();
        }
    })
</script>
</body>
</html>